<template>
  <el-form-item :label="props.title" class="expand-form-item">
    <el-checkbox-group v-model="selectVal">
      <el-checkbox v-for="item in props.setting.options" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
    <div v-if="props.children && props.children.length > 0" class="option-box">
      <div class="option-btn" @click="changeChildrenShow">
        <div class="option-btn-icon">
          <span :class="{ plus: childrenShow }"></span>
        </div>
        <p>{{ childrenShow ? "取消" : "拓展" }}</p>
      </div>
    </div>
  </el-form-item>
</template>

<script setup>
import { computed } from "vue"

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  value: {
    type: String,
    default: "",
  },
  children: {
    type: Array,
    default: () => [],
  },
  childrenShow: {
    type: Boolean,
    default: false,
  },
  setting: {
    type: Object,
    default: () => {},
  },
})

const emits = defineEmits(["update:value", "update:childrenShow"])
const childrenShow = computed(() => props.childrenShow)
const changeChildrenShow = () => {
  emits("update:childrenShow", !childrenShow.value)
}
const selectVal = computed({
  get: () => props.value ? JSON.parse(props.value) : [],
  set: (val) => {
    emits("update:value", JSON.stringify(val))
  },
})
</script>

<style scoped></style>
